<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="100px" label-position="left">
    <el-form-item :label="$t('user.Nickname')" prop="nickName">
      <el-input v-model="user.nickName" maxlength="30" />
    </el-form-item>
    <el-form-item :label="$t('user.Phone')" prop="phonenumber">
      <el-input v-model="user.phonenumber" maxlength="11" />
    </el-form-item>
    <el-form-item :label="$t('user.Email')" prop="email">
      <el-input v-model="user.email" maxlength="50" />
    </el-form-item>
    <el-form-item :label="$t('user.Gender')">
      <el-radio-group v-model="user.gender">
        <el-radio :label="0">{{ $t("user.Male") }}</el-radio>
        <el-radio :label="1">{{ $t("user.Female") }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">{{
        $t("user.save")
      }}</el-button>
      <el-button type="danger" size="mini" @click="close">{{
        $t("role.Close")
      }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    updateUserProfile
  } from "@/api/system/user-profile";

  export default {
    props: {
      user: {
        type: Object,
      },
    },
    data() {
      return {
        // 表单校验
        rules: {
          nickName: [{
            required: true,
            message: this.$t("user.NicknameNULL"),
            trigger: "blur",
          }, ],
          email: [{
              required: true,
              message: this.$t("user.EmailNull"),
              trigger: "blur",
            },
            {
              type: "email",
              message: this.$t("user.InputCorrectEmail"),
              trigger: ["blur", "change"],
            },
          ],
          phonenumber: [{
              required: true,
              message: this.$t("user.PhoneNull"),
              trigger: "blur",
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: this.$t("user.InputCorrectPhone"),
              trigger: "blur",
            },
          ],
        },
      };
    },
    methods: {
      submit() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            updateUserProfile(this.user).then((response) => {
              this.$modal.msgSuccess(this.$t("ModifySuccessful"));
            });
          }
        });
      },
      close() {
        this.$tab.closePage();
      },
    },
  };

</script>
